import React, { Component } from 'react'
import {
  Card,
  Table,
  Button,
  Modal,
  message
} from 'antd'

import UserForm from './user-form'
import LinkButton from '../../components/LinkButton'
import {reqUsers, reqRemoveUsers, reqAddOrUpdateUser } from '../../api'
import { formatDate } from '../../utils/date_utils'
import {PAGE_SIZE} from "../../utils/constants"

const { confirm } = Modal

// 用户路由
export default class User extends Component {

  state = {
    users: [], // 所有用户列表
    roles: [], // 所有角色列表
    isLoading: false, // 是否正在获取数据
    isShow: false, // 是否显示模态框
  }

  // 初始化 Table 的列数组
  initColumns = () => {
    this.columns = [
      {
        title: '用户名',
        dataIndex: 'username'
      },
      {
        title: '邮箱',
        dataIndex: 'email'
      },
      {
        title: '电话',
        dataIndex: 'phone'
      },
      {
        title: '注册时间',
        dataIndex: 'create_time',
        render: create_time => formatDate(create_time)
      },
      {
        title: '所属角色',
        dataIndex: 'role_id',
        render: role_id => this.roleNames[role_id]
      },
      {
        width: 120,
        title: '操作',
        render: user => (
          <span>
            <LinkButton onClick={() => this.showUpdate(user)}>修改</LinkButton>
            <LinkButton onClick={() => this.removeUser(user._id)}>删除</LinkButton>
          </span>
        )
      },
    ]
  }

  /*
  * 根据 roles 的数组, 生成包含所有角色名的对象
  * 属性名(角色id值)
  * */
  initRoleNames = (roles) => {
    const roleNames = roles.reduce((pre, role) => {
      pre[role._id] = role.name
      return pre
    }, {})
    // 保存
    this.roleNames = roleNames
  }

  // 添加/更新用户
  addOrUpdateUser = () => {
    // 进行表单验证, 通过了才处理
    this.form.validateFields(async (err, values) => {
      if (!err) {
        this.setState({ isShow: false })
        // 1. 收集输入数据
        const user = values
        this.form.resetFields()
        // 如果是更新, 需要给 user, 指定 _id属性
        if (this.user) { // 更新用户
          user._id = this.user._id
        }
        // 2. 提交添加的请求
        const result = await reqAddOrUpdateUser(user)
        // 关闭模态框
        if (result.status === 0) {
          message.success(`${this.user ? '修改' : '添加'}用户成功`)
          // 3. 更新列表显示
          this.getUsers()
        } else {
          message.error(`${this.user ? '修改' : '添加'}添加用户失败`)
        }
      }
    })
  }

  // 显示添加界面
  showAdd = () => {
    this.user = null // 去除前面保存的 user
    this.setState({
      isShow: true
    })
  }

  // 显示修改界面
  showUpdate = (user) => {
    this.user = user // 保存 user
    this.setState({
      isShow: true
    })
  }

  // 获取用户列表
  getUsers = async () => {
    // 显示 loading
    this.setState({
      isLoading: true
    })
    const result = await reqUsers()
    // 隐藏 loading
    this.setState({
      isLoading: false
    })
    if (result.status === 0) {
      const { users, roles } = result.data
      this.initRoleNames(roles)
      // 更新状态
      this.setState({
        users,
        roles
      })
    }
  }

  // 根据 userId 删除指定 用户
  removeUser = (userId) => {
    // 1 显示对话框提示
    confirm({
      title: `确认删除此用户吗?`,
      okText: '确定',
      okType: 'danger',
      cancelText: '取消',
      onOk: async () => {
        const result = await reqRemoveUsers(userId)
        if (result.status === 0) {
          // 提示删除成功
          message.success('删除用户成功')
          this.getUsers()
        } else {
          // 提示删除失败
          message.success('删除用户失败')
        }
      },
      onCancel() {

      },
    })

  }

  componentWillMount () {
    this.initColumns()
  }

  componentDidMount () {
    // this.findUserRole()
    this.getUsers()
  }

  render () {
    const { users, roles, isLoading, isShow } = this.state
    const user = this.user || {}
    const total = users.length

    const title = (
      <Button type="primary" onClick={() => this.showAdd() }>创建用户</Button>
    )

    return (
      <Card title={title}>
        <Table
          rowKey='_id'
          bordered={true}
          loading={isLoading}
          columns={this.columns}
          dataSource={users}
          pagination={{
            total,
            defaultPageSize: PAGE_SIZE,
            showQuickJumper: true
          }}
        />

        <Modal
          title={ user._id ? '修改用户' : '添加用户'}
          visible={isShow}
          onOk={this.addOrUpdateUser}
          onCancel={() => {
            this.form.resetFields()
            this.setState({isShow: false})
          }}
        >
          <UserForm setForm={form => this.form = form} roles={roles} user={user} />
        </Modal>
      </Card>
    )
  }
}
